<template>
  <el-form ref="basicInfoForm" :model="form" :rules="rules" label-width="100px" class="my-form">
    <div class="group-item">
      <el-form-item label="表名称" prop="tableName">
        <el-input placeholder="请输入仓库名称" v-model="form.tableName"/>
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input placeholder="请输入" v-model="form.tableComment" />
      </el-form-item>
      <el-form-item label="实体类名称" prop="className">
        <el-input placeholder="请输入" v-model="form.className" />
      </el-form-item>
      <el-form-item label="作者" prop="functionAuthor">
        <el-input placeholder="请输入" v-model="form.functionAuthor" />
      </el-form-item>
    </div>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { reactive, toRefs, watch, computed, defineComponent } from 'vue'
import { StateType as GenCodeStateType, GenTable } from '@/store/modules/system/genCode'

interface DataType {
  form: GenTable;
  rules: object;
}
export default defineComponent({
  name: 'BasicInfoForm',
  setup() {
    const store = useStore<{genCode: GenCodeStateType}>()
    const data = reactive<DataType>({
      form: {
        tableId: null,
        tableName: '',
        tableComment: '',
        className: '',
        functionAuthor: '',
        remark: ''
      },
      rules: {
        tableName: [
          { required: true, message: '请输入表名称', trigger: 'blur' }
        ],
        tableComment: [
          { required: true, message: '请输入表描述', trigger: 'blur' }
        ],
        className: [
          { required: true, message: '请输入实体类名称', trigger: 'blur' }
        ],
        functionAuthor: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ]
      }
    })
    const info = computed<GenTable>(() => {
      return store.state.genCode.info
    })
    watch(info, () => {
      data.form = info.value
    })
    return {
      ...toRefs(data)
    }
  }
})
</script>

<style lang="scss" scoped>
.my-form{
  max-width: 800px;
  .group-item{
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      width: 400px;
    }
  }
}
</style>
